<?php
/**
 * 3-4岁颜色认知内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('3-4岁颜色认知');

// 页面特定样式
$page_styles = <<<HTML
<style>
    /* 3-4岁颜色认知特定样式 */
    body {
        background-color: #fff8e1;
        font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
    }
    
    .navbar {
        background: linear-gradient(to right, #ff9e80, #ffcc80);
        border-radius: 0 0 20px 20px;
    }
    
    .colors-header {
        text-align: center;
        padding: 40px 0;
        margin-bottom: 30px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border: 6px solid #ffe0b2;
    }
    
    .colors-title {
        font-size: 2.5rem;
        font-weight: bold;
        color: #ff7043;
        margin-bottom: 15px;
    }
    
    .colors-subtitle {
        font-size: 1.2rem;
        color: #666;
        max-width: 800px;
        margin: 0 auto 20px;
    }
    
    .color-card {
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        margin-bottom: 30px;
        transition: transform 0.3s ease;
    }
    
    .color-card:hover {
        transform: translateY(-5px);
    }
    
    .color-sample {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .color-info {
        background-color: white;
        padding: 20px;
        text-align: center;
    }
    
    .color-name {
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .color-example {
        font-size: 1.1rem;
        color: #666;
    }
    
    .activity-section {
        background-color: white;
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 40px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .activity-title {
        font-size: 1.8rem;
        text-align: center;
        color: #ff7043;
        margin-bottom: 25px;
        font-weight: bold;
    }
    
    .activity-card {
        border: 3px solid #ffe0b2;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 20px;
        background-color: #fffdf7;
    }
    
    .activity-name {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 15px;
        color: #ff7043;
    }
    
    .activity-description {
        color: #666;
        margin-bottom: 15px;
    }
    
    .activity-steps {
        padding-left: 20px;
    }
    
    .activity-steps li {
        margin-bottom: 10px;
    }
    
    .back-button {
        background-color: #ff7043;
        color: white;
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: bold;
        margin-bottom: 30px;
        display: inline-block;
        transition: all 0.3s ease;
    }
    
    .back-button:hover {
        background-color: #f4511e;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        color: white;
    }
</style>
HTML;
?>

<!-- 主内容区 -->
<div class="container mt-4">
    <!-- 返回按钮 -->
    <a href="<?php echo page_url('age-3-4-cognitive'); ?>" class="back-button mb-4">
        <i class="fas fa-arrow-left mr-2"></i> 返回认知专区
    </a>
    
    <!-- 颜色认知标题 -->
    <div class="colors-header">
        <h1 class="colors-title">颜色认知</h1>
        <p class="colors-subtitle">认识基本颜色，区分不同颜色，培养孩子的色彩感知能力。</p>
        <img src="<?php echo asset_url('images/colors-banner.jpg'); ?>" alt="颜色认知" class="img-fluid rounded" style="max-height: 300px;">
    </div>
    
    <!-- 颜色卡片 -->
    <h2 class="section-title text-center mb-4">基础颜色</h2>
    
    <div class="row">
        <!-- 红色 -->
        <div class="col-md-4">
            <div class="color-card">
                <div class="color-sample" style="background-color: #e53935;">
                    <img src="<?php echo asset_url('images/color-red.png'); ?>" alt="红色" height="100">
                </div>
                <div class="color-info">
                    <h3 class="color-name">红色</h3>
                    <p class="color-example">像苹果、草莓和消防车</p>
                </div>
            </div>
        </div>
        
        <!-- 黄色 -->
        <div class="col-md-4">
            <div class="color-card">
                <div class="color-sample" style="background-color: #ffeb3b;">
                    <img src="<?php echo asset_url('images/color-yellow.png'); ?>" alt="黄色" height="100">
                </div>
                <div class="color-info">
                    <h3 class="color-name">黄色</h3>
                    <p class="color-example">像香蕉、向日葵和小黄鸭</p>
                </div>
            </div>
        </div>
        
        <!-- 蓝色 -->
        <div class="col-md-4">
            <div class="color-card">
                <div class="color-sample" style="background-color: #2196f3;">
                    <img src="<?php echo asset_url('images/color-blue.png'); ?>" alt="蓝色" height="100">
                </div>
                <div class="color-info">
                    <h3 class="color-name">蓝色</h3>
                    <p class="color-example">像天空、海洋和蓝莓</p>
                </div>
            </div>
        </div>
        
        <!-- 绿色 -->
        <div class="col-md-4">
            <div class="color-card">
                <div class="color-sample" style="background-color: #4caf50;">
                    <img src="<?php echo asset_url('images/color-green.png'); ?>" alt="绿色" height="100">
                </div>
                <div class="color-info">
                    <h3 class="color-name">绿色</h3>
                    <p class="color-example">像草地、树叶和青蛙</p>
                </div>
            </div>
        </div>
        
        <!-- 橙色 -->
        <div class="col-md-4">
            <div class="color-card">
                <div class="color-sample" style="background-color: #ff9800;">
                    <img src="<?php echo asset_url('images/color-orange.png'); ?>" alt="橙色" height="100">
                </div>
                <div class="color-info">
                    <h3 class="color-name">橙色</h3>
                    <p class="color-example">像橙子、胡萝卜和金鱼</p>
                </div>
            </div>
        </div>
        
        <!-- 紫色 -->
        <div class="col-md-4">
            <div class="color-card">
                <div class="color-sample" style="background-color: #9c27b0;">
                    <img src="<?php echo asset_url('images/color-purple.png'); ?>" alt="紫色" height="100">
                </div>
                <div class="color-info">
                    <h3 class="color-name">紫色</h3>
                    <p class="color-example">像葡萄、茄子和薰衣草</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 颜色活动 -->
    <div class="activity-section mt-5">
        <h2 class="activity-title">有趣的颜色活动</h2>
        
        <div class="activity-card">
            <h3 class="activity-name">颜色寻宝游戏</h3>
            <p class="activity-description">在家中寻找特定颜色的物品，锻炼色彩辨识能力。</p>
            <ol class="activity-steps">
                <li>和孩子一起确定一种要寻找的颜色（如红色）</li>
                <li>设定时间限制（如5分钟）</li>
                <li>在家中寻找所有该颜色的物品</li>
                <li>将找到的物品集中放在一起，数一数找到了多少个</li>
                <li>一起说出每个物品的名称和用途</li>
            </ol>
        </div>
        
        <div class="activity-card">
            <h3 class="activity-name">颜色混合实验</h3>
            <p class="activity-description">用简单的材料让孩子体验颜色混合的奇妙效果。</p>
            <ol class="activity-steps">
                <li>准备红、黄、蓝三种颜料或食用色素</li>
                <li>在小杯子里加入清水</li>
                <li>分别加入不同颜色，观察颜色变化</li>
                <li>尝试混合两种颜色：红+黄=橙色，蓝+黄=绿色，红+蓝=紫色</li>
                <li>用混合出的颜色进行绘画创作</li>
            </ol>
        </div>
        
        <div class="activity-card">
            <h3 class="activity-name">彩色分类游戏</h3>
            <p class="activity-description">锻炼孩子的分类能力和色彩认知。</p>
            <ol class="activity-steps">
                <li>准备各种颜色的小物件（积木、扣子、玩具等）</li>
                <li>准备几个不同颜色的盒子或碗</li>
                <li>让孩子将物品按颜色分类放入对应的容器中</li>
                <li>完成后，数一数每种颜色有多少个物品</li>
                <li>讨论哪种颜色的物品最多，哪种最少</li>
            </ol>
        </div>
    </div>
</div> 